<template>
  <div>
    <h3 class="welcome">欢迎光临, admin!!! 今天是{{newTime}}!!!</h3>
    <div class="count">
      <el-card class="userCount">
        <h3>用户数量: {{userNum}}</h3>
      </el-card>

      <el-card class="deviceCount">
        <h3>设备数量: {{deviceNum}}</h3>
      </el-card>

      <el-card class="roomCount">
        <h3>实验室数量: 20</h3>
      </el-card>
    </div>

    <el-calendar v-model="date">
    </el-calendar>
  </div>
</template>

<script>
import moment from 'moment';
import { getUserData } from '../../network/user.js';
import { getDevice } from '../../network/device.js';
export default {
  name: 'FirstPage',
  data () {
    return {
      date: new Date(),
      newTime: moment().format('YYYY' + '年' + 'MM' + '月' + 'DD' + '日'),
      userNum: 0,
      deviceNum: 0
    }
  },
  created () {
    this.getUser();
    this.getDevice();
  },

  methods: {
    //得到用户数据
    async getUser () {
      const res = await getUserData();
      console.log(res.data);
      if (res.status !== 200) {
        return this.$message.error('获取用户列表失败!');
      }
      this.userNum = res.data.length;
    },
    //得到设备数据
    async getDevice () {
      const res = await getDevice();
      console.log(res);
      if (res.status !== 200) {
        return this.$message.error('获取设备失败');
      }
      this.deviceNum = res.data.length;

    }
  },

}
</script>

<style scoped>
.el-card {
  width: 500px;
  height: 80px;
  text-align: center;
  font-size: 20px;
  color: floralwhite;
  margin: 20px 0;
  line-height: 0;
}

.count {
  display: flex;
  justify-content: space-between;
}

.userCount {
  background-color: skyblue;
}

.deviceCount {
  background-color: pink;
}

.roomCount {
  background-color: #ccc;
}
</style>